<template>
	<div class="ComponentsViews">
		<div class="table-comp-root">
			<el-table ref="singleTable" :data="tableData" :header-cell-style="{
				color: 'rgba(0, 0, 0, 0.85)',
				fontSize: '14px',
				textAlign: 'center',
				fontWeight: 'bold',
				padding: 0,
				height: '32px',
				background: 'rgb(244,245,246)',
				borderColor: '#ccc'
			}" :cell-style="{
				color: 'rgba(96,98,102,1)',
				fontSize: '14px',
				textAlign: 'left',
				padding: 0,
				height: '32px',
			}" :checkbox-config="{
				showHeader: false,
			}" :height="tableHeight" highlight-current-row element-loading-spinner="el-icon-loading"
				element-loading-background="#f8f8f8" :element-loading-text="$t('message.bhView.loading')">
				<template slot="empty"> No data </template>
				<el-table-column property="label" :label="this.tableTitle.partsName" width="120" fixed>
					<template slot-scope="scope">
						<p style="text-align: left;">{{ scope.row.partsName }}</p>
					</template>
				</el-table-column>
				<el-table-column property="label" :label="this.tableTitle.pointName" width="120" fixed>
					<template slot-scope="scope">
						<p style="text-align: left;">{{ scope.row.pointName }}</p>
					</template>
				</el-table-column>
				<el-table-column property="label" :label="this.tableTitle.pointNumber" width="80">
					<template slot-scope="scope">
						<p style="text-align: center;">{{ scope.row.pointNumber }}</p>
					</template>
				</el-table-column>
				<el-table-column property="label" :label="this.tableTitle.inspectionDate" width="100">
					<template slot-scope="scope">
						<p style="text-align: center;">{{ scope.row.inspectionDate }}</p>
					</template>
				</el-table-column>
				<el-table-column property="label" :label="this.tableTitle.originalThickness" width="80">
					<template slot-scope="scope">
						<p style="text-align: center;">{{ formatNumberValue(scope.row.originalThickness) }}</p>
					</template>
				</el-table-column>
				<el-table-column property="label" :label="this.tableTitle.managementThickness" width="80">
					<template slot-scope="scope">
						<p style="text-align: center;">{{ formatNumberValue(scope.row.managementThickness) }}</p>
					</template>
				</el-table-column>
				<el-table-column property="label" :label="this.tableTitle.inspectionMethod" width="100">
					<template slot-scope="scope">
						<p style="text-align: left;">{{ scope.row.inspectionMethod }}</p>
					</template>
				</el-table-column>
				<el-table-column property="label" :label="tableTitle.vI_NDI_Result" width="440">
					<el-table-column property="label" :label="tableTitle.summary" width="200">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ scope.row.summary }}</p>
						</template>
					</el-table-column>
					<el-table-column property="label" :label="tableTitle.vicinityThickness" width="80">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ formatNumberValue(scope.row.vicinityThickness) }}</p>
						</template>
					</el-table-column>
					<el-table-column property="label" :label="tableTitle.corrosionDepth" width="80">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ formatNumberValue(scope.row.corrosionDepth) }}</p>
						</template>
					</el-table-column>
					<el-table-column property="label" :label="tableTitle.remainingThickness" width="80">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ formatNumberValue(scope.row.remainingThickness) }}</p>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column property="label" :label="tableTitle.finalThickness" width="80">
					<template slot-scope="scope">
						<p style="text-align: center;">{{ formatNumberValue(scope.row.finalThickness) }}</p>
					</template>
				</el-table-column>
				<el-table-column property="label" :label="tableTitle.corrosionRate" width="210">
					<el-table-column property="label" :label="tableTitle.cR_Long" width="70">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ formatNumberValue(scope.row.cR_Long) }}</p>
						</template>
					</el-table-column>
					<el-table-column property="label" :label="tableTitle.cR_Short" width="70">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ formatNumberValue(scope.row.cR_Short) }}</p>
						</template>
					</el-table-column>
					<el-table-column property="label" :label="tableTitle.cR_Regression" width="70">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ formatNumberValue(scope.row.cR_Regression) }}</p>
						</template>
					</el-table-column>
				</el-table-column>
				<el-table-column property="label" :label="tableTitle.remainingLife" width="210">
					<el-table-column property="label" :label="tableTitle.rL_Long" width="70">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ formatNumberValue(scope.row.rL_Long) }}</p>
						</template>
					</el-table-column>
					<el-table-column property="label" :label="tableTitle.rL_Short" width="70">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ formatNumberValue(scope.row.rL_Short) }}</p>
						</template>
					</el-table-column>
					<el-table-column property="label" :label="tableTitle.rL_Regression" width="70">
						<template slot-scope="scope">
							<p style="text-align: center;">{{ formatNumberValue(scope.row.rL_Regression) }}</p>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table>	
		</div>
	</div>
</template>

<script>
import _ from 'lodash-es';
import $ from "jquery";
import { GetPartsInspectionResultCaptions, GetPartsInspectionResult } from "@/api/api";
export default {
	props: ["dmgCode", "activeFlag"],
	components: {
    },
	// ["userInfo"],
	// dataプロパティ：変更が検知されるような値
	data() {
		return {
            tableData: [],
			tableTitle: {},
			tableHeight: this.getTableHeight(),
		}
	},
    created() {
		this.GetTableLabel();
		this.GetTableData();
		this.getTableHeight();
	},
	watch: {
		dmgCode(val) {
			this.GetTableLabel();
			this.GetTableData();
			this.getTableHeight();
		},
		activeFlag(val) {
			if (val == 3) {
				this.GetTableLabel();
				this.GetTableData();
				this.getTableHeight();
			}
		}
	},
	methods: {
		GetTableLabel() {
			GetPartsInspectionResultCaptions().then((res) => {
				this.tableTitle = {};
				if (res.data.code == 0) {
					this.tableTitle = res.data.data;
				}
			});
		},
		GetTableData() {
			let Dto = {
				dmgCode: this.dmgCode,
			}
			GetPartsInspectionResult(Dto).then((res) => {
				this.tableData = [];
				if (res.data.code == 0) {
					this.tableData = res.data.data;
				}
			});
		},

		getTableHeight() {
			this.tableHeight = $(".table-comp-root").height();
		},

		formatNumberValue(val) {
			return val == "" || isNaN(val) ? val : (+val).toFixed(2)
		}
	},
};
</script>

<style lang="scss" scoped>
.ComponentsViews {
    width: 100%;
    height: 93.7%;
	position: absolute;
    overflow: scroll;
    border: 1px solid #ccc;

	.table-comp-root {
		width: 100%;
		height: 100%;

		::v-deep .current-row>td {
			background-color: rgba(2, 150, 255, 0.07) !important;
		}
	}
}
</style>